import React, { Component } from 'react'
// prop-types就是对react组件中props对象中的变量进行类型检测
// cnpm i -S prop-types
import PropTypes from 'prop-types'
import Item from '../Item'

export default class List extends Component {
  // 对接收的props进行：类型、必要性的限制
  static propTypes = {
    todos: PropTypes.array.isRequired,
    updateTodo: PropTypes.func.isRequired
  }

  render() {
    console.log(this.props.todos, 'List接收来自App的数据');
    return (
      <ul className="todo-main">
        { this.props.todos.length? this.props.todos.map((item) => {
            return (
              // 向子组件Item传参
              <Item key={item.id} {...item} updateTodo={this.props.updateTodo} deleteTodo={this.props.deleteTodo}></Item>
            )
          }) : '当前列表为空'
        }
      </ul>
    )
  }
}
